<template>
	<!-- 商品显示 组件 -->
	<view class="goodsCaListComponent">
		<view :style="{
	        backgroundColor: newData.background ? newData.background.indexOf('bg-') !== -1 ? '' : newData.background : newData.background,
	        paddingBottom: `${newData.pageDownSpacing}rpx`,
	        paddingLeft: `${newData.pagelrSpacing}rpx`,
	        paddingRight: `${newData.pagelrSpacing}rpx`,
	      }" :class="
	        newData.background
	          ? newData.background.indexOf('bg-') !== -1
	            ? newData.background : ''
	          : 'bg-' + thememobile.backgroundColor
	      ">
			<!-- 上部分类导航 -->
			<view class="top_nav" id="caListNav"
				:style="{paddingTop: `${newData.pageUpSpacing}rpx`,top:`${CustomBar}px`,backgroundColor: newData.background ? newData.background.indexOf('bg-') !== -1 ? '' : newData.background : newData.background,}"
				:class="newData.background ? newData.background.indexOf('bg-') !== -1 ? newData.background : '' : 'bg-' + thememobile.backgroundColor">
				<scroll-view scroll-x scroll-with-animation :scroll-left="scrollLeft1">
					<view class="f-goods-box">
						<view v-for="(item1, index1) in newData.navButtons" :key="index1" @click="navClick(index1)"
							style="margin-right: 20rpx"
							:style="{ marginTop: index1 !== currentIndex ? '10rpx' : '0rpx' }">
							<view class="nav_bar" :class="[index1 === currentIndex ? 'current_nav_bar' : '']"
								:style="{ backgroundColor: newData.titleBackground, color: newData.titleColor }">
								{{ item1.navName }}
							</view>
							<view v-if="index1 === currentIndex" class="current_nav_triangle"
								:style="{ borderTop: `12rpx solid ${newData.titleBackground}` }"></view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 下部商品列表 -->
			<view class="goods-box" id="caListGoods"
				v-if="newData.navButtons.length && newData.navButtons.length > currentIndex">
				<navigator v-for="(item2, index2) in goodsList" :key="index2"
					:url="'/pages/goods/goods-detail/index?id=' + item2.spuId+ '&activityId=' + item2.activityId"
					class="goods-container">
					<view style="width: 200rpx;height: 220rpx;">
						<view class="" style="position: relative;height: 100%;" v-if="item2.prescription=='2'">
							<view class="flex flex-column-center"
								style="position: absolute;width: 100%;height:100%;z-index: 50;align-items: center;color: #666666">
								<view class="" style="font-size: 24rpx;">处方药依法不展示包装</view>
								<view class="" style="font-size: 24rpx;">请在药师指导下使用</view>
							</view>
							<image :src="item2.picUrls && item2.picUrls[0] ? item2.picUrls[0] : ''"  mode="aspectFill"
								style="filter: blur(5rpx);height: 100%;" />
						</view>
						<image :src="item2.picUrls && item2.picUrls[0] ? item2.picUrls[0] : ''" mode="aspectFill" v-if="item2.prescription!='2'" style="height: 100%;"/>
					</view>
					<view class="nav_goods">
						<view class="text-black margin-top-xs overflow-2"
							style="font-weight: 700; height: 64rpx; font-size: 24rpx">
							{{ item2.spuName }}
						</view>
						<view class="goods_price">
							<view style="display: flex">
								<view class="text-price text-bold text-red text-lg row-price">
									{{ item2.price }}
								</view>
								<view class="text-price text-gray row-price"
									style="margin-left: 10rpx; text-decoration: line-through"
									v-if="parseFloat(item2.oldPrice) > parseFloat(item2.price)">
									{{ item2.oldPrice }}
								</view>
							</view>
							<view>
								<image
									src="https://fs-mix.oss-cn-beijing.aliyuncs.com/1/material/25d17b7a-eb89-49cd-bc63-64954b1214a1.png"
									alt="" style="height: 40rpx; width: 40rpx" />
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>

</template>

<script>
	const app = getApp();
	import api from '@/utils/api'

	export default {
		props: {
			value: {
				type: Object,
				default: function() {
					return {
						background: 'bg-gradual-scarlet',
						titleColor: '#000',
						titleBackground: '#FFFFFF',
						pageUpSpacing: 20,
						pageDownSpacing: 20,
						pagelrSpacing: 20,
						navButtons: [],
					}
				}
			},
			activityId: {},
		},
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				CustomBar: this.CustomBar,
				newData: this.value,
				currentIndex: 0,
				goodsList: [],
				newGoodsids: [],
				scrollLeft1: 0,
				pageIndex: 0
			};
		},
		mounted() {
			this.getgoodsList(this.currentIndex)
		},
		methods: {
			jumpPage(page) {
				if (page) {
					uni.navigateTo({
						url: page
					});
				}
			},
			// 点击切换分类
			navClick(i) {
				this.currentIndex = i
				this.pageIndex = 0
				this.getgoodsList(this.currentIndex)
				this.scrollLeft1 = (this.currentIndex - 2) * 80
				this.navJumpTop()
			},
			// 切换分类时，商品列表回到顶部
			navJumpTop() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#caListNav').boundingClientRect()
				query.select('#caListGoods').boundingClientRect()
				query.selectViewport().scrollOffset()
				query.exec(res => {
					console.log(res)
					if (res.length && res[0].top == this.CustomBar) {
						const top = res[2].scrollTop - this.CustomBar - res[0].height + res[1].top
						uni.pageScrollTo({
							scrollTop: top,
							duration: 100,
						})
					}
				})
			},
			// 获取活动商品
			getgoodsList(index) {
				if (this.value.navButtons && this.value.navButtons.length > index) {
					// 获取商品ID
					let goodsids = []
					this.value.navButtons[index].goodsList.forEach(v => {
						goodsids.push(v.spuId)
					})
					// 按size = 10 分隔id
					this.newGoodsids = [];
					let size = 10
					if (goodsids.length > size) {
						let index = 0
						while (index < goodsids.length) {
							this.newGoodsids.push(goodsids.slice(index, index += size));
						}
					} else {
						this.newGoodsids[0] = goodsids
					}
					this.getGoods()
				}
			},
			getGoods() {
				// 10个商品一组,循环请求
				if (this.pageIndex < this.newGoodsids.length) {
					this.getGoodsInfo(this.newGoodsids[this.pageIndex], this.pageIndex)
				}
			},
			// 从接口请求商品数据			
			getGoodsInfo(goodsids, index) {
				const page = {
					activityId: this.activityId,
					goodsids: goodsids.toString(),
				}
				// 分类权限
				const UrlParams = uni.getStorageSync('UrlParams')
				if (UrlParams && UrlParams.mark) {
					page.mark = UrlParams.mark
				}
				api.getActiveGoodByid(page).then(res => {
					let data = res.data
					if (index == 0) {
						this.goodsList = []
					}
					let goodsList = []
					if (data.length > 0) {
						goodsList = data.filter(v => {
							return v.status == 1
						})
					} else {
						goodsList = []
					}
					this.goodsList = [...this.goodsList, ...goodsList]
					this.pageIndex++
					this.getGoods()
				})
			}
		}
	}
</script>

<style scoped>
	.goodsCaListComponent {
		position: relative;
		display: block;
		width: 100%;
	}

	.top_nav {
		position: sticky;
		z-index: 77;
		padding-bottom: 20rpx;
	}

	.f-goods-box {
		display: flex;
	}

	.nav_bar {
		padding: 8rpx 16rpx;
		border-radius: 10rpx;
		white-space: nowrap;
		cursor: pointer;
	}

	.current_nav_bar {
		color: #e54d42 !important;
	}

	.current_nav_triangle {
		transform: translateX(-50%);
		margin-left: 50%;
		width: 0;
		height: 0;
		border-right: 16rpx solid transparent;
		border-left: 16rpx solid transparent;
	}

	.goods-box .goods-container {
		background-color: #fff;
		overflow: hidden;
		display: flex;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
	}

	.card-img {
		width: 30% !important;
	}

	.nav_goods {
		margin-left: 30rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.goods_price {
		display: flex;
		justify-content: space-between;
	}

	.overflow-1 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.overflow-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
